<template>
  <LayoutNav @change="selectChange"></LayoutNav>
  <div class="layout">
    <div class="layout-side" :class="{ 'hidden-menu': hiddenMenu }">
      <template v-if="childrenMenu.length > 0">
        <el-menu :default-active="activeMenu">
          <LayoutSideMenu
            ref="LayoutSideMenuRef"
            :data="childrenMenu"
          ></LayoutSideMenu>
        </el-menu>
      </template>
    </div>

    <div
      class="layout-body"
      :class="{ 'hidden-menu': hiddenMenu }"
      v-if="!bodyLoad"
    >
      <router-view></router-view>
    </div>
    <div class="layout-footer" :class="{ 'hidden-menu': hiddenMenu }"></div>
  </div>
</template>
<script lang="ts" setup>
import "@/theme/css/style.scss";
import LayoutNav from "./LayoutNav.vue";
import LayoutSideMenu from "./LayoutSideMenu.vue";
import {
  ref,
  computed,
  watch,
  getCurrentInstance,
  onMounted,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMenus } from "@/store";
import { pa } from "element-plus/es/locale";

const {
  proxy,
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const MenusStore = useMenus();

const router = useRouter();

const route = useRoute();

const bodyLoad = ref<boolean>(true);

const hiddenMenu = ref<boolean>(true);

const childrenMenu = ref<any>([]);

const LayoutSideMenuRef = ref<HTMLElement>();

const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu as string;
  }
  return path;
});

const selectChange = (children:any) => {
  childrenMenu.value = children;
  hiddenMenu.value = childrenMenu.value.length == 0 ? true : false;
  nextTick(()=>{
    proxy?.$refs["LayoutSideMenuRef"]?.refreshMenuList(childrenMenu.value);
  })
}

onMounted(() => {
  nextTick(() => {
    bodyLoad.value = false;
  });
});
</script>
<style scoped>
.layout-side {
  overflow-x: hidden;
  position: fixed;
  width: 176px;
  z-index: 99;
  height: calc(100% - 51px);
  border-right: 1px solid var(--el-border-color-lighter);
  top: 51px;
  padding: 10px 0;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  background: #ffffff;
}

.layout-side.hidden-menu {
  width: 0;
}
.layout-side .el-menu {
  border-right: none;
}
.layout-body {
  left: 176px;
  top: 51px;
  position: absolute;
  width: calc(100% - 216px);
  height: calc(100% - 40px - 51px - 51px);
  padding: 20px;
  background: #efefef;
  overflow-y: scroll;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.layout-body.hidden-menu {
  left: 0;
  width: calc(100% - 40px);
}
.layout-footer {
  width: calc(100% - 176px);
  left: 176px;
  text-align: center;
  position: fixed;
  bottom: 0;
  height: 50px;
  border-top: 1px solid var(--el-border-color-lighter);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.layout-footer.hidden-menu {
  left: 0;
  width: 100%;
}
.layout-footer img {
  margin: 10px auto;
  height: 30px;
}
</style>
  